---
title: "Theming: Compactness & Row Height"
---

Add more white space or pack more data into the UI.

`spacing` is the main theme parameter that controls how tightly data and UI elements are packed together. All padding in the grid is defined as a multiple of this value, so increasing it will make most components larger by increasing their internal white space while leaving the size of text and icons unchanged.

In the following example, classes are applied to the grid container that change compactness dynamically:

{% gridExampleRunner title="Dynamic Height" name="dynamic-height"  exampleHeight=450 /%}

## Row Height

By default, row height is determined by the content height plus padding. Content height is `max(iconSize, dataFontSize)`. Padding is a multiple of `spacing`. This means that your rows can change size if you change any of the icon size, font size, or spacing.

The grid provides two ways of customising row height:

`rowVerticalPaddingScale` and `headerVerticalPaddingScale` are plain numbers without units. The padding is multiplied by this number, so `0.75` would mean 3/4 of the usual padding. Using these scale parameters preserves the behaviour that row size adjusts when font size changes, which is useful if font size is not known in advance.

`rowHeight` and `headerHeight` are CSS length values - numbers with units. They set the height of the row or header to a fixed value, regardless of the font size or icon size.

`listItemHeight` sets the height of rows in lists such as the [rich select editor](./provided-cell-editors-rich-select/) and [set filter](./filter-set/).

## More Compactness Parameters

To find compactness parameters relating to a feature, search for the feature name in the "All Parameters" section of the [Theme Builder](/theme-builder/).

## Extended Syntax For Length Parameters

All compactness parameters except `rowVerticalPaddingScale` and `headerVerticalPaddingScale` are length parameters - numbers with units like `10px`. Length parameters do not have a common suffix - any parameter that does not have a special suffix like `Color` or `FontFamily` is a length value.

Length parameters can accept the following values:

| Syntax | Description |
|-|-|
| `string` | A [CSS length value](https://developer.mozilla.org/en-US/docs/Web/CSS/length), such as `'10px'` or variable expression `'var(--myAppHeaderSize)'`. |
| `4` | A number without units is assumed to be pixels |
| `{ ref: 'spacing' }` | Use the same value as the `spacing` parameter |
| `{ calc: '4 * spacing - 2px' }` | A CSS [calc expression](https://developer.mozilla.org/en-US/docs/Web/CSS/calc), except that parameter names are allowed and will be converted to the appropriate CSS custom property. This expression would map to the CSS string  `"calc(4 * var(--ag-spacing) - 2px)"`. Note that `-` is a valid character in CSS identifiers, so if you use it for subtraction then spaces are required around it. |

## Using CSS rules to customise compactness

The grid contains thousands of elements. Most of them respond to the `spacing` parameter, by having their default padding defined as a multiple of it. But many of them don't have their own specific parameters to customise size. For all elements except rows, headers and list items (see note below), you can set their height, margin or paddings using CSS rules that target a class name, e.g.

```css
.ag-panel-title-bar {
    height: 80px;
}
```

### Setting the height of rows, headers and list items

To change the height of rows, headers and list item heights, you *must* use the provided parameters `rowHeight`, `headerHeight` and `listItemHeight`, or the equivalent CSS custom properties `--ag-row-height`, `--ag-header-height` and `--ag-list-item-height`. The grid uses [DOM virtualisation](./dom-virtualisation/) for rendering large amounts of data, and needs to know the height of virtualised elements in order to calculate their layout. It does this by measuring the values of CSS variables such as `--ag-row-height`.

Using CSS to set a height on a row element itself e.g. `.ag-row { height: 50px; }` is not supported.
